<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>个人页面</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
		<script src="/js/plugins/jquery/jquery.min.js"></script>
		<script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
		<script src="/js/plugins/jrender/jrender.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
		<link rel="stylesheet" href="/css/reset.css">
		<link rel="stylesheet" href="/css/userProfiles.css">
		<link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
		<script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
		<script src="/js/common.js"></script>
		<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
		<script src="/js/plugins/dialog2/dialog.min.js"></script>
		<script src="/js/plugins/easyEditor/easyEditor.min.js"></script>
		<script src="/js/common.js"></script>
		<script>
            //查询粉丝数的方法
            function queryFans(concernedId,type) {
                $.get("/concerneds/" + concernedId,{type:type}, function (data) {
                    if (type){
						$('#concerned').html(data);
					}else {
                        $('#fans').html(data);
					}

                })
            }
            var USER_ID;
            var USER_INFO_STORE;
            $(function () {
                var params=getParams();
                USER_ID=params.userId;
                USER_INFO_STORE=JSON.parse(sessionStorage.getItem("user"));
                $("#myConcernedLink").attr("href","/mine/myConcernedList.html?userId="+params.userId);
                $("#myFansLink").attr("href","/mine/myFansList.html?userId="+params.userId);
                //当前页的input框
                var currentInput = $("#currentPage");
                //用于储存数据的数据
                var Arr = [];
                //总页数
                var pages = 1;
                function query(href,fun) {
                    //获取当前页的值
                    var currentPage = currentInput.val();//1
                    $.get(href,{currentPage:currentPage,pageSize:3}, function (data) {
                        console.log(data);
                        //渲染该用户有多少条游记
                        //合并两个数组到第一个参数数组上
                        $.merge( Arr, data.list );
                        //用于渲染时循环,循环时是取list的属性出来
                        var json = {
                            list:Arr
                        };
                        //渲染数据
                        fun(json,data);
                        //设置总页数
                        pages = data.pages;
                    })
                    //当前页input框+1
                    currentInput.val(parseInt(currentPage)+1);
                }

                function travels(json,data){
                    $('#total').html(data.total)
                    $("#travels").renderValues(json,{
                        getHref:getHref
                    });
                }
                //分页
                /*function comments(json,data){
                    $('#comment').html(data.total)
                    $("#comments").renderValues(json,{
                        getHref:getHref
                    });
                }*/

                //获取到跳转地址上的userId
                var params = getParams();
                if (params.userId) {
                    //通过用户id查询出他的粉丝数
                    queryFans(params.userId)
					//分页加渲染游记
					query("/users/"+params.userId+"/travels",travels)

                    queryFans(params.userId);
                    //通过用户id查询出他的关注数;
                    queryFans(params.userId,"concerned");
					//通过用户id查询到他的资料
					$.get("/users/",{userId:params.userId},function (data) {
                        $("#coverImgUrl").css("background-image","url("+data.coverImgUrl+")")
                        $(".info").renderValues(data)
                    })
				}

                //当页面滚动条变化时，执行的函数
                $(window).scroll( function() {
                    if (judge){
						if($(document).scrollTop()+$(window).height()>=$(document).height()-1){
							var currentPage = currentInput.val();
							//判断是否小于或等于最后一页,如果是就去查询
							if(currentPage<=pages) {
								query("/users/"+params.userId+"/travels",travels)
							}else{
								$(document).dialog({
									type : 'notice',
									infoText: '到底了!',
									autoClose: 1000
								});
							}
						}
                    }
                });

				//他的点评
				$.get("/strategyComments/"+params.userId,function (data) {
                    console.log(data);
                    $('#comment').html(data.total)
                    $("#comments").renderValues(data,{
                        getHref:function (item, value) {
                            //获取要跳转的地址
                            var href = $(item).data("href");
                            //把id拼接进去,再设置到a连接的href属性上
                            $(item).attr('href',href+value);
                        }
                    });
                })

				//这里是实现只能让游记列表进行分页
				var judge = true;
				$("#comments-tab").click(function () {
                    judge = false;
                })
                $("#travels-tab").click(function () {
                    judge = true;
                })

				//他的旅行单
                $.get("/travelForms/"+params.userId,function (data) {
                    console.log({list:data});
                    $('#travelForms').html($(data).size())
                    $("#pills-strategy").renderValues({list:data},{
                        getHref:function (item, value) {
                            //获取要跳转的地址
                            var href = $(item).data("href");
                            //把id拼接进去,再设置到a连接的href属性上
                            $(item).attr('href',href+value);
                        }
                    });
                })


                //查询到当前登录用户所关注的所以用户id
                $.get("/concerneds",function (data) {
                    console.log(data);
                    var num = $.inArray(parseInt(params.userId), data);
                    if (num != -1){
                        $('#followBtn').html("取消关注");
                    }
                })
                $('#followBtn').click(function () {
                    if ($('#followBtn').html() == "取消关注") {
                        $.ajax({
                            url : "/concerneds/"+params.userId ,   // 处理的请求路径
                            type : "delete" ,      // 此处发送的是delete请求（可变更为其他需要的请
                            dataType : "json" , // 返回的数据类型为json类型
                            success : function(data) {
                                queryFans(params.userId) ;
                                $('#followBtn').html("关注");
                            }
                        }) ;
                    }else {
                        $.post('/concerneds/'+params.userId,function (data) {
                            if(data.success){
                                queryFans(params.userId)
                                $(document).dialog({
                                    type : 'notice',
                                    infoText: '关注成功',
                                    autoClose: 500,
                                    position: 'center'  // center: 居中; bottom: 底部
                                });
                                $('#followBtn').html("取消关注");
                            }else {
                                $(document).dialog({
                                    type : 'notice',
                                    infoText: data.msg,
                                    autoClose: 1500,
                                    position: 'center'  // center: 居中; bottom: 底部
                                });
                            }
                        })
					}

                })


				//实例化一个easyEditor编辑器
                var editor = easyEditor('editor');
                //发送私信
				$("#sendLetterBtn").click(function () {
				    //获取接收人的id
					var reciverId=$("#reciverId").val();
				    //获取发送内容
                    var data = editor.getContent({
                        emojiSign: ['[',']'], //表情分隔符
                        blockSign: '%' //行块分隔符
                    });
                    var content = data.text
					//发送请求，向数据库添加数据
					$.post("/letters/"+reciverId,{content:content},function (data) {
					    if(data.success){
                            $(document).dialog({
                                type : 'notice',
                                infoText: "发送成功",
                                autoClose: 1500,
                                position: 'center',  // center: 居中; bottom: 底部
                            })
							$("#closeModelBtn").trigger("click");
							editor.clearAll();
						}
                    })
                });

                $("#letterBtn").click(function () {
					if(USER_INFO_STORE==null){
                        $(document).dialog({
                            type : 'notice',
                            infoText: "您还没登录，不能够关注他人！",
                            autoClose: 1500,
                            position: 'center',  // center: 居中; bottom: 底部
                        })
					}else if(USER_ID==USER_INFO_STORE.id){
                        $(document).dialog({
                            type : 'notice',
                            infoText: "不能自己和自己窃窃私语噢！",
                            autoClose: 1500,
                            position: 'center',  // center: 居中; bottom: 底部
                        })
					}
					else{
					    $("#showSendLetterModel").trigger("click");
					}
                });

			})

		</script>
	</head>
	<body>
	<button id="showSendLetterModel" data-toggle="modal" data-target="#myModal" hidden></button>
	<div id="show"></div>
	<!--分页需要-->
	<input type="hidden" name="currentPage" id="currentPage" value="1">
		<div class="container bg"  id="coverImgUrl">
			<a href="javascript:window.history.go(-1)" class="my-arrow">
				<span><i class="fa fa-chevron-left fa-2x"></i></span>
			</a>
			<div class="container">
				<div class="info">
					<input type="hidden" id="reciverId" render-value="id">
					<img class="rounded-circle" width="17%" render-src="headImgUrl">
					<p class="name" render-html="nickName"></p>
					<p render-html="sign"></p>

					<div class="row num">
						<div class="col-2 border border-left-0 border-top-0 border-bottom-0">
							<div>
								<a id="myConcernedLink"><span id="concerned">1</span></a>
							</div>
							<div>
								<span>关注</span>
							</div>
						</div>
						<div class="col-2">
							<div>
								<span id="fans">0</span>
									</div>
							<div>
								<a id="myFansLink"><span>粉丝</span></a>
							</div>
						</div>
						<div class="col">
							<button class="btn btn-success ibtn" id="letterBtn">私信</button>
							<button class="btn btn-success ibtn" id="followBtn">关注</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="tabs">
			<ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
				<li class="nav-item">
					<a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
						TA的游记[<span id="total">1</span>]
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
						TA的点评[<span id="comment">1</span>]
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
						TA的旅行单[<span id="travelForms">0</span>]
					</a>
				</li>
			</ul>
			<div class="container tab-content" id="pills-tabContent">
				<div class="tab-pane fade show active" id="travels">
						<dl class="list" render-loop="list">
							<dd>
								<a data-href="travelContent.html?id=" render-key="list.id" render-fun="getHref">
									<img  render-src="list.coverUrl">
								</a>
									<p><span class="title" render-html="list.title"></span>
										<span class="span-right">
						 				<!--<span >0</span> <i class="fa fa-thumbs-o-up"></i></span>-->
									</p>

								<hr>
							</dd>
						</dl>
				</div>

				<div class="comment tab-pane fade " id="comments">
					<div render-loop="list">
						<div class="row" >
							<div class="col-2 comment-head">
								<img  class="rounded-circle" render-src="list.user.headImgUrl">
							</div>
							<div class="col">
								<span class="comment-star" render-loop="list.starNums"><i class="fa fa-star"></i></span>

								<span class="comment-date" render-html="list.createTime"></span>
								<div class="comment-content">
									<a data-href="/mine/strategyComment.html?strategyCommentId=" render-key="list.id" render-fun="getHref">
										<p render-html="list.content"></p>
									</a>
								</div>
								<ul class="comment-img" render-loop="list.imgLists">
									<li>
										<img  render-src="list.imgLists.imgUrls">
									</li>

								</ul>

								<div class="comment-link">
									<a data-href="strategyCatalogs.html?strategyId=" render-key="list.strategy.id" render-fun="getHref">
										<img  render-src="list.strategy.coverUrl"> <span render-html="list.strategy.title"></span>
										<i class="fa fa-angle-right fa-2x"></i>
									</a>
								</div>

							</div>
						</div>
					</div>

				</div>
				<div class="tab-pane fade" id="pills-contact">
					<div class="tab-pane fade active show" id="pills-strategy">
						<div class="container commend" render-loop="list">
							<a data-href="../strategyCatalogs.html?strategyId=" render-key="list.strategy.id" render-fun="getHref">
								<p render-html="list.strategy.title"></p>
								<img render-src="list.strategy.coverUrl" width="100%">
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>




	<!-- Modal：发送私信 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-body">
					<div id="editor" style="width:100%;height: 200px"></div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal" id="closeModelBtn">关闭</button>
					<button type="button" class="btn btn-primary" id="sendLetterBtn">发送</button>
				</div>
			</div>
		</div>
	</div>

</body>
</html>